<template>
    <div
        class="preview-template-container"
        :class="{ isPreview: isPreview }"
    >
        <preview-form
            ref="PreviewForm"
            :list="list"
            :disabledIdList="disabledIdList"
            v-if="previewType === 'form' && !isPreview"
        ></preview-form>
        <preview-table
            :list="list"
            v-if="previewType !== 'form'"
        ></preview-table>
        <preview-wechat
            :list="list"
            v-if="previewType === 'form' && isPreview"
        ></preview-wechat>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import PreviewForm from "@/views/module-manage/src/components/preview-template/form.vue";
import PreviewTable from "@/views/module-manage/src/components/preview-template/table.vue";
import PreviewWechat from "@/views/module-manage/src/components/preview-template/wechat.vue";

@Component({
    name: "PreviewTemplate",
    components: {
        PreviewForm,
        PreviewTable,
        PreviewWechat
    }
})
export default class PreviewTemplate extends Vue {
    @Prop({
        type: String,
        default: "form"
    })
    readonly previewType!: string;

    @Prop({
        type: String,
        default: ""
    })
    readonly formId!: string;

    @Prop({
        type: Array,
        default: () => {
            return [];
        }
    })
    readonly formList!: any[];

    // 禁用的表单项id
    @Prop({
        type: Array,
        default: () => {
            return [];
        }
    })
    readonly disabledIdList!: any[];

    @Prop({
        type: Boolean,
        default: () => {
            return false;
        }
    })
    readonly isPreview!: boolean;

    @Watch("formList", { immediate: true, deep: true })
    changFormList() {
        if (this.formList.length) {
            this.list = this.formList;
        }
    }

    list: any[] = [];
    id: any = "";

    created() {
        if (this.formList.length) {
            this.list = this.formList;
        } else {
            this.id = this.formId || this.$route.query.id || "";
            this.getInfo();
        }
    }

    async getInfo() {
        if (!this.id) return;
        const response: any = await this.$server["moduleManage/form/query"]({
            params: {
                id: this.id
            }
        });
        if (response.data.code !== 200) {
            return;
        }
        const data = response.data.data || {};
        this.list = data.items;
        this.$emit("passVal", data);
    }
}
</script>

<style lang="scss" scoped>
.preview-template-container {
    height: calc(100% - 100px);
    background: #fff;
    overflow-y: auto;
    margin-top: 10px;
    &.isPreview {
        background: #fff;
        max-height: calc(80vh - 120px);
        overflow-y: auto;
    }
}
</style>
